<template>
    <section>
        <bk-form>
            <bk-form-item v-for="(reviewGroup, index) in copyReviewGroups" :key="index"
                :class="{ 'is-error': errorIndexs.includes(index), 'review-form': true }">
                <section class="review-group">
                    <bk-input class="review-name" :placeholder="'Flow ' + (index + 1)" :disabled="disabled"
                        :value="reviewGroup.name" @change="modifyReviewName(reviewGroup, ...arguments)"></bk-input>

                    <user-input clearable class="review-user" :placeholder="$t('stageReview.userInputTips')"
                        :value="reviewGroup.reviewers" :disabled="disabled"
                        :handle-change="(name, value) => addReviewUser(reviewGroup, name, value)"></user-input>

                    <bk-button text title="primary" @click="deleteReviewGroup(index)" :disabled="disabled"
                        class="review-opt">{{ $t('delete') }}</bk-button>
                </section>
                <span v-if="errorIndexs.includes(index)" class="bk-form-tip is-danger">{{
                    $t('stageReview.reviewRequire') }}</span>
            </bk-form-item>
        </bk-form>
        <bk-button text title="primary" @click="addReviewGroup" :disabled="disabled || reviewGroups.length >= 5"
            class="review-opt mt3">
            <i class="bk-icon icon-plus-circle"></i>{{ $t('stageReview.addFlow') }}
        </bk-button>
    </section>
</template>

<script>
    import UserInput from '@/components/atomFormField/UserInput'

    export default {
        components: {
            UserInput
        },

        props: {
            disabled: Boolean,
            reviewGroups: Array
        },

        data () {
            return {
                copyReviewGroups: JSON.parse(JSON.stringify(this.reviewGroups))
            }
        },

        computed: {
            errorIndexs () {
                return this.copyReviewGroups.map((reviewGroup, index) => {
                    if (reviewGroup.name === '' || !reviewGroup.reviewers || reviewGroup.reviewers.length <= 0) {
                        return index
                    }
                    return -1
                }).filter(item => item > -1)
            }
        },

        watch: {
            errorIndexs (val) {
                const isReviewError = val.length > 0 || this.copyReviewGroups.length <= 0
                this.$emit('change', 'isReviewError', isReviewError)
            }
        },

        methods: {
            modifyReviewName (reviewGroup, value) {
                reviewGroup.name = value
                this.triggleChange()
            },

            addReviewUser (reviewGroup, name, value) {
                reviewGroup.reviewers = value
                this.triggleChange()
            },

            deleteReviewGroup (index) {
                this.copyReviewGroups.splice(index, 1)
                this.triggleChange()
            },

            addReviewGroup () {
                const newItem = { name: '', reviewers: [] }
                this.copyReviewGroups.push(newItem)
                this.triggleChange()
            },

            triggleChange () {
                this.$emit('change', 'reviewGroups', this.copyReviewGroups)
            }
        }
    }
</script>

<style lang="scss" scoped>
.review-group {
    display: flex;
    align-items: center;

    .review-name {
        width: 270px;
    }

    .review-user {
        width: 487px;
        margin: 0 8px 0 10px;
    }
}

.review-form {
    margin-bottom: 10px;

    &:last-child,
    &.is-error {
        margin-bottom: 0px;
    }
}

.is-error {
    ::v-deep .devops-staff-input {
        border-color: #ff5656;
        color: #ff5656;
    }
}

.review-opt {
    display: flex;
    align-items: center;
    font-size: 12px;

    ::v-deep .bk-icon {
        top: -1px;
        margin-right: 3px;
    }
}

.mt3 {
    margin-top: 3px;
}
</style>
